<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS 第 05 天 —— 学成在线 | 前端基础班学习笔记</title>
    <meta name="generator" content="VuePress 1.7.1">
    
    <meta name="description" content="前端基础班笔记">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/basenode/assets/css/0.styles.2182318c.css" as="style"><link rel="preload" href="/basenode/assets/js/app.52c57e5d.js" as="script"><link rel="preload" href="/basenode/assets/js/2.fd1002bd.js" as="script"><link rel="preload" href="/basenode/assets/js/22.c01d802c.js" as="script"><link rel="prefetch" href="/basenode/assets/js/10.0fd16134.js"><link rel="prefetch" href="/basenode/assets/js/11.69b32ff0.js"><link rel="prefetch" href="/basenode/assets/js/12.8306a2fe.js"><link rel="prefetch" href="/basenode/assets/js/13.bd409108.js"><link rel="prefetch" href="/basenode/assets/js/14.397fbca0.js"><link rel="prefetch" href="/basenode/assets/js/15.3ebf464d.js"><link rel="prefetch" href="/basenode/assets/js/16.18b0f270.js"><link rel="prefetch" href="/basenode/assets/js/17.aca32580.js"><link rel="prefetch" href="/basenode/assets/js/18.b36abbab.js"><link rel="prefetch" href="/basenode/assets/js/19.40fd0225.js"><link rel="prefetch" href="/basenode/assets/js/20.9c6d2a17.js"><link rel="prefetch" href="/basenode/assets/js/21.6d37b375.js"><link rel="prefetch" href="/basenode/assets/js/23.d7de44fa.js"><link rel="prefetch" href="/basenode/assets/js/24.3470c223.js"><link rel="prefetch" href="/basenode/assets/js/3.924754cc.js"><link rel="prefetch" href="/basenode/assets/js/4.4eeb3907.js"><link rel="prefetch" href="/basenode/assets/js/5.88e4a4fd.js"><link rel="prefetch" href="/basenode/assets/js/6.ae7868e8.js"><link rel="prefetch" href="/basenode/assets/js/7.6ab91996.js"><link rel="prefetch" href="/basenode/assets/js/8.750a9450.js"><link rel="prefetch" href="/basenode/assets/js/9.26864b79.js">
    <link rel="stylesheet" href="/basenode/assets/css/0.styles.2182318c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/basenode/" class="home-link router-link-active"><!----> <span class="site-name">前端基础班学习笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/basenode/css/" aria-current="page" class="sidebar-link">CSS 学习</a></li><li><a href="/basenode/css/day01.html" class="sidebar-link">CSS 第 01 天 —— 基础选择器</a></li><li><a href="/basenode/css/day02.html" class="sidebar-link">CSS 第 02 天 —— 复合选择器</a></li><li><a href="/basenode/css/day03.html" class="sidebar-link">CSS 第 03 天 —— 盒子模型</a></li><li><a href="/basenode/css/day04.html" class="sidebar-link">CSS 第 04 天 —— 浮动</a></li><li><a href="/basenode/css/day05.html" aria-current="page" class="active sidebar-link">CSS 第 05 天 —— 学成在线</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#能力目标" class="sidebar-link">能力目标</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_1-准备工作" class="sidebar-link">1. 准备工作</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_1-1-常见的图片格式" class="sidebar-link">1.1 常见的图片格式</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_1-2-学成在线案例准备工作" class="sidebar-link">1.2 学成在线案例准备工作</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#☆1-3-css-属性书写顺序-重要" class="sidebar-link">☆1.3 CSS 属性书写顺序(重要)</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#☆1-4-页面布局整体思路" class="sidebar-link">☆1.4 页面布局整体思路</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_2-header-区域" class="sidebar-link">2. header 区域</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_2-1-header-区域制作" class="sidebar-link">2.1 header 区域制作</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_2-2-logo-区域制作" class="sidebar-link">2.2 logo 区域制作</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_2-3-导航栏-nav-区域制作-上" class="sidebar-link">2.3 导航栏 nav 区域制作(上)</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_2-4-导航栏-nav-区域制作-中" class="sidebar-link">2.4 导航栏 nav 区域制作(中)</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_2-5-导航栏-nav-区域制作-下" class="sidebar-link">2.5 导航栏 nav 区域制作(下)</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_2-6-搜索-search-模块-input-制作" class="sidebar-link">2.6 搜索 search 模块 input 制作</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_2-7-搜索-search-模块-button-制作" class="sidebar-link">2.7 搜索 search 模块 button 制作</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_2-8-用户-user-模块制作" class="sidebar-link">2.8 用户 user 模块制作</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_3-banner-区域" class="sidebar-link">3. Banner 区域</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_3-1-banner-模块制作" class="sidebar-link">3.1 banner 模块制作</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_3-2-subnav-模块制作-上" class="sidebar-link">3.2 subnav 模块制作（上）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_3-3-subnav-模块制作-下" class="sidebar-link">3.3 subnav 模块制作（下）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_3-4-course-模块制作-上" class="sidebar-link">3.4 course 模块制作（上）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_3-5-course-模块制作-中" class="sidebar-link">3.5 course 模块制作（中）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_3-6-course-模块制作-下" class="sidebar-link">3.6 course 模块制作（下）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_4-精品推荐" class="sidebar-link">4. 精品推荐</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_4-1-精品推荐模块-上" class="sidebar-link">4.1 精品推荐模块（上）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_4-2-精品推荐模块-中" class="sidebar-link">4.2 精品推荐模块（中）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_4-3-精品推荐模块-下" class="sidebar-link">4.3 精品推荐模块（下）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_5-核心内容-课程列表" class="sidebar-link">5. 核心内容 - 课程列表</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_5-1-box-hd-模块制作" class="sidebar-link">5.1 box-hd 模块制作</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_5-2-box-bd-模块制作" class="sidebar-link">5.2 box-bd 模块制作</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_5-3-box-模块完成" class="sidebar-link">5.3 box 模块完成</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_6-页面底部" class="sidebar-link">6. 页面底部</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_6-1-footer-模块制作" class="sidebar-link">6.1 footer 模块制作</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_6-2-copyright-模块制作" class="sidebar-link">6.2 copyright 模块制作</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day05.html#_6-3-links-模块制作" class="sidebar-link">6.3 links 模块制作</a></li></ul></li></ul></li><li><a href="/basenode/css/day06.html" class="sidebar-link">CSS 第 06 天 —— 定位</a></li><li><a href="/basenode/css/day07.html" class="sidebar-link">CSS 第 07 天 —— 高级技巧</a></li><li><a href="/basenode/css/day08.html" class="sidebar-link">CSS 第 08 天 —— HTML5+CSS3 提高</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css-第-05-天-学成在线"><a href="#css-第-05-天-学成在线" class="header-anchor">#</a> CSS 第 05 天 —— 学成在线</h1> <h2 id="能力目标"><a href="#能力目标" class="header-anchor">#</a> 能力目标</h2> <ol><li>能够用专业的方式搭建项目结构，包括：<strong>项目结构搭建</strong>和<strong>基础公共样式</strong>；</li> <li>能够应用已经学习的知识完成<strong>学成在线</strong>案例；</li> <li>能够认识到养成<strong>良好的 CSS 书写顺序</strong>既专业又能提高浏览器的渲染性能。</li></ol> <h2 id="_1-准备工作"><a href="#_1-准备工作" class="header-anchor">#</a> 1. 准备工作</h2> <h3 id="_1-1-常见的图片格式"><a href="#_1-1-常见的图片格式" class="header-anchor">#</a> 1.1 常见的图片格式</h3> <blockquote><p>第 1 节课 / 3'44''</p></blockquote> <h4 id="_1-1-1-「常见的图片格式」问题"><a href="#_1-1-1-「常见的图片格式」问题" class="header-anchor">#</a> 1.1.1 「常见的图片格式」问题</h4> <ul><li>问题 1：常见的图片格式有几种？特点是什么？</li> <li>问题 2：PSD 文件对前端工程师而言，最大的优势是什么？</li></ul> <h4 id="_1-1-2-「常见的图片格式」答案"><a href="#_1-1-2-「常见的图片格式」答案" class="header-anchor">#</a> 1.1.2 「常见的图片格式」答案</h4> <ul><li><p>问题 1：常见的图片格式有几种？特点是什么？</p> <table><thead><tr><th>格式</th> <th>特点</th></tr></thead> <tbody><tr><td>JPG</td> <td>常用，高清，颜色多，<strong>不透明</strong></td></tr> <tr><td>GIF</td> <td>常用，颜色少，背景透明，动图（<strong>表情包</strong>），只能有 256 种颜色</td></tr> <tr><td>PNG</td> <td>常用，高清，颜色多，<strong>背景透明</strong></td></tr> <tr><td>PSD</td> <td>设计师专用，设计稿，通常不能直接使用，需要用 Photoshop 专业软件操作</td></tr></tbody></table></li> <li><p>问题 2：PSD 文件对前端工程师而言，最大的优势是什么？</p> <ol><li>复制文字</li> <li>获得图片</li> <li>测量大小和距离</li></ol></li></ul> <h3 id="_1-2-学成在线案例准备工作"><a href="#_1-2-学成在线案例准备工作" class="header-anchor">#</a> 1.2 学成在线案例准备工作</h3> <blockquote><p>第 1 节课 / 6'39''</p></blockquote> <h4 id="_1-2-1-案例目标"><a href="#_1-2-1-案例目标" class="header-anchor">#</a> 1.2.1 案例目标</h4> <ol><li>整体感知<strong>企业级网站的布局流程</strong>，复习 HTML 和 CSS 知识并<strong>综合应用</strong>；</li> <li>应用<strong>结构与样式分离的思想</strong>完成案例，更符合一线开发模式和要求。</li></ol> <blockquote><p>学成在线具有典型的<strong>企业级网站结构</strong>。</p></blockquote> <h4 id="_1-2-2-工具和素材-认知"><a href="#_1-2-2-工具和素材-认知" class="header-anchor">#</a> 1.2.2 工具和素材（认知）</h4> <ol><li><p>工具 = <code>VSCode</code>（代码）+ <code>Chrome</code>（调试）+ <code>PxCook</code>（文字+颜色+测量）</p> <ul><li>IT 职场更多会使用<strong>蓝湖</strong>、<strong>摹客</strong>，但是只支持在线团队开发，不适合授课；</li> <li><strong>PxCook</strong> 的使用与<strong>蓝湖</strong>、<strong>摩客</strong>基本一致，<strong>支持离线使用，更适合授课</strong>；</li> <li>更多的设计师开始使用 Sketch，不再使用 Photoshop。</li></ul></li> <li><p>素材文件</p> <ol><li><strong>PSD 源文件</strong>：设计稿文件，可以用工具（<strong>PxCook</strong>）提取素材并测量；</li> <li><strong>JPG 文件</strong>：页面效果图，对比最终完成的网页效果；</li> <li><strong>切图文件</strong>：由设计师提供
<ol><li><code>images</code>：网站固定使用图片素材，例如：<strong>Logo</strong>、<strong>修饰图片</strong>等；</li> <li><code>uploads</code>：非固定素材，例如：由后台定制的<strong>课程图片</strong>、<strong>宣传图片</strong>等。</li></ol></li></ol></li></ol> <h4 id="_1-2-3-案例准备-项目结构搭建"><a href="#_1-2-3-案例准备-项目结构搭建" class="header-anchor">#</a> 1.2.3 案例准备（项目结构搭建）</h4> <ol><li><p>新建 <code>study</code> 目录，并用 VSCode 打开</p> <ul><li>存放项目所有文件；</li> <li>提示：在真实开发中，<strong>项目目录不建议用中文</strong>。</li></ul></li> <li><p>新建 <code>index.html</code> 作为网站首页</p> <ul><li>几乎所有网站入口的第一个文件名字都叫做 <code>index.html</code>。</li></ul></li> <li><p>新建 <code>css/style.css</code> 作为网站首页的样式文件</p> <ul><li>外部引入能实现<strong>完全的样式与结构分离</strong>。</li></ul></li> <li><p>复制 <code>images</code> 和 <code>uploads</code> 目录到 <code>study</code> 目录，其中：</p> <ol><li><code>images</code>：网站固定使用图片素材，例如：<strong>Logo</strong>、<strong>修饰图片</strong>等；</li> <li><code>uploads</code>：非固定素材，例如：由后台定制的<strong>课程图片</strong>、<strong>宣传图片</strong>等。</li></ol></li></ol> <p>准备完成的目录及文件结构如下：</p> <div class="language-ini extra-class"><pre class="language-ini"><code>.
├── index.html                # 网站首页
├── css
│   └── style.css             # 样式文件
├── images                    # 固定图片素材
│   ├── btn.png
│   ├── logo.png
│   └── user.png
└── uploads                   # 后台上传的非固定素材
    ├── basic-banner.png
    ├── basic-pic.jpg
    ├── big-banner.png
    ├── course01.png
    ├── course02.png
    ├── course03.png
    ├── course04.png
    ├── course05.png
    ├── course06.png
    ├── course07.png
    ├── course08.png
    ├── data-banner.png
    └── data-pic.png
</code></pre></div><h4 id="_1-2-4-html-骨架和基础公共样式"><a href="#_1-2-4-html-骨架和基础公共样式" class="header-anchor">#</a> 1.2.4 HTML 骨架和基础公共样式</h4> <ol><li><p>在 <code>index.html</code> 完成页面骨架搭建，其中包括：</p> <ul><li><code>lang</code>：网站语言</li> <li><code>title</code>：网站标题</li> <li><code>link</code>：外部样式表</li> <li>Hello 文本</li></ul> <p>完成后的代码结构如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>zh-CN<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>学成在线首页<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./css/style.css<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    Hello 学成在线
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>在 <code>css/style.css</code> 中完成<strong>公共样式</strong>编写，代码如下：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 基础公共样式 */</span>
<span class="token selector">*</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body</span> <span class="token punctuation">{</span>
  <span class="token property">font</span><span class="token punctuation">:</span> 14px/1.5 <span class="token string">'Helvetica Neue'</span><span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> <span class="token string">'Microsoft Yahei'</span><span class="token punctuation">,</span> <span class="token string">'Hiragino Sans GB'</span><span class="token punctuation">,</span>
    <span class="token string">'Heiti SC'</span><span class="token punctuation">,</span> <span class="token string">'WenQuanYi Micro Hei'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #050505<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #f3f5f7<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">a</span> <span class="token punctuation">{</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #050505<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li</span> <span class="token punctuation">{</span>
  <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.clearfix:before,
.clearfix:after</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> table<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.clearfix:after</span> <span class="token punctuation">{</span>
  <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.clearfix</span> <span class="token punctuation">{</span>
  *<span class="token property">zoom</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="☆1-3-css-属性书写顺序-重要"><a href="#☆1-3-css-属性书写顺序-重要" class="header-anchor">#</a> ☆1.3 CSS 属性书写顺序(重要)</h3> <blockquote><p>第 1 节课 / 4'53''</p></blockquote> <h4 id="_1-3-1-「css-属性书写顺序-重要-」问题"><a href="#_1-3-1-「css-属性书写顺序-重要-」问题" class="header-anchor">#</a> 1.3.1 「CSS 属性书写顺序(重要)」问题</h4> <ul><li>问题 1：CSS 属性书写顺序(重要)是什么？</li></ul> <h4 id="_1-3-2-「css-属性书写顺序-重要-」答案"><a href="#_1-3-2-「css-属性书写顺序-重要-」答案" class="header-anchor">#</a> 1.3.2 「CSS 属性书写顺序(重要)」答案</h4> <ul><li><p>问题 1：CSS 属性书写顺序(重要)是什么？</p> <table><thead><tr><th>顺序</th> <th>类别</th> <th>属性</th></tr></thead> <tbody><tr><td>01</td> <td>布局定位</td> <td><code>display</code>、<code>position</code>、<code>float</code>、<code>clear</code>、<code>visibility</code>、<code>overflow</code></td></tr> <tr><td>02</td> <td>盒子模型和背景</td> <td><code>width</code>、<code>height</code>、<code>margin</code>、 <code>padding</code>、<code>border</code>、<code>background</code></td></tr> <tr><td>03</td> <td>文本属性</td> <td><code>color</code>、<code>font</code>、<code>text-decoration</code>、 <code>text-align</code>、<code>vertical-align</code>、<code>white-space</code>、<code>break-word</code></td></tr> <tr><td>04</td> <td>其他属性</td> <td><code>content</code>、<code>cursor</code>、<code>border-radius</code>、 <code>box-shadow</code>、<code>text-shadow</code></td></tr></tbody></table> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>CSS 的书写顺序会影响到浏览器的渲染性能，书写顺序记忆套路如下：</p> <ol><li>找位置 —— 标准流、浮动、定位</li> <li>圈地盘 —— 宽高、间距、边框、背景</li> <li>定内容 —— 文本、颜色、下划线、对齐、文本换行</li> <li>做点缀 —— 鼠标形状、边框圆角、阴影、文本阴影</li></ol></div></li></ul> <h3 id="☆1-4-页面布局整体思路"><a href="#☆1-4-页面布局整体思路" class="header-anchor">#</a> ☆1.4 页面布局整体思路</h3> <blockquote><p>第 2 节课 / 5'41''</p></blockquote> <ol><li>确认<strong>版心</strong>，居中可视区域，需要测量；</li> <li>确认<strong>行模块</strong>（父级标准流）和<strong>列模块</strong>（子级浮动）；</li> <li>从上到下逐一完成行模块，循环重复以下三步，直到页面完成：
<ol><li>分析确认每个列的大小（<code>width</code> &amp; <code>height</code>），再确认列的位置 (<code>margin</code> &amp; <code>padding</code>)；</li> <li>制作 HTML 结构，浏览确认结构正确；</li> <li>编写样式，编写边测试，不要视图一步到位。</li></ol></li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>编写样式，一定要编写边测试，不要视图一步到位。</p></div> <h2 id="_2-header-区域"><a href="#_2-header-区域" class="header-anchor">#</a> 2. header 区域</h2> <h3 id="_2-1-header-区域制作"><a href="#_2-1-header-区域制作" class="header-anchor">#</a> 2.1 header 区域制作</h3> <blockquote><p>第 2 节课 / 8'08''</p></blockquote> <h4 id="☆2-1-1-确定版心"><a href="#☆2-1-1-确定版心" class="header-anchor">#</a> ☆2.1.1 确定版心</h4> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 版心 */</span>
<span class="token selector">.w</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在搭建结构时，行模块（标准流父盒子）通常使用<strong>多类名</strong>，其中：</p> <ol><li>第 1 个类名是盒子名称，用于在 CSS 中定义该父盒子的具体样式；</li> <li>第 2 个类名是版心类，用于<strong>统一约束</strong>父级盒子的<strong>宽度并居中显示</strong>。</li></ol></div> <h4 id="_2-1-2-分析-header-区域的结构构成"><a href="#_2-1-2-分析-header-区域的结构构成" class="header-anchor">#</a> 2.1.2 分析 header 区域的结构构成</h4> <h5 id="_1-header-区域的大小和位置"><a href="#_1-header-区域的大小和位置" class="header-anchor">#</a> 1) header 区域的大小和位置</h5> <ol><li>大小：<code>1200px * 42px</code></li> <li>位置：水平居中 + 上下 margin</li></ol> <h5 id="_2-header-区域的构成"><a href="#_2-header-区域的构成" class="header-anchor">#</a> 2) header 区域的构成</h5> <ol><li>Logo <code>logo</code></li> <li>导航 <code>nav</code></li> <li>搜索框 <code>search</code></li> <li>个人信息 <code>user</code></li></ol> <h4 id="_2-1-3-header-区域代码实现"><a href="#_2-1-3-header-区域代码实现" class="header-anchor">#</a> 2.1.3 header 区域代码实现</h4> <h5 id="_1-header-区域的结构"><a href="#_1-header-区域的结构" class="header-anchor">#</a> 1) header 区域的结构</h5> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- header 区域 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>header w<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  头部盒子
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h5 id="_2-header-区域的样式"><a href="#_2-header-区域的样式" class="header-anchor">#</a> 2) header 区域的样式</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* header 区域 */</span>
<span class="token selector">.header</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 42px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 30px auto<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <ul><li>背景颜色 <code>bcg</code> 回车，左手中指 <code>ddd</code> 很顺手；</li> <li><code>header</code> 区域完成之前不要删除背景色，这样可以辅助调试。</li></ul></div> <h3 id="_2-2-logo-区域制作"><a href="#_2-2-logo-区域制作" class="header-anchor">#</a> 2.2 logo 区域制作</h3> <blockquote><p>第 2 节课 / 4'40''</p></blockquote> <h4 id="_2-2-1-分析-logo-区域的结构构成"><a href="#_2-2-1-分析-logo-区域的结构构成" class="header-anchor">#</a> 2.2.1 分析 logo 区域的结构构成</h4> <ol><li>大小：<code>198 * 42</code></li> <li>位置：左侧紧靠版心</li></ol> <h4 id="_2-2-2-logo-区域代码实现"><a href="#_2-2-2-logo-区域代码实现" class="header-anchor">#</a> 2.2.2 logo 区域代码实现</h4> <ol><li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>logo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Logo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.logo</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 198px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 42px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #aaa<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>亲儿子要一起浮动。</p></blockquote></li> <li><p>内容</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>logo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./images/logo.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>学成在线官网<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>删除 logo 的测试背景颜色</p></li></ol> <h3 id="_2-3-导航栏-nav-区域制作-上"><a href="#_2-3-导航栏-nav-区域制作-上" class="header-anchor">#</a> 2.3 导航栏 nav 区域制作(上)</h3> <blockquote><p>第 2 节课 / 6'24''</p></blockquote> <h4 id="_2-3-1-导航栏开发的专业做法"><a href="#_2-3-1-导航栏开发的专业做法" class="header-anchor">#</a> 2.3.1 导航栏开发的专业做法</h4> <p>在实际开发中，导航栏不会直接用 <code>a</code> 标签，而是会用 <code>li</code> 标签包裹 <code>a</code> 标签，原因：</p> <ol><li><code>li+a</code> 语义更清晰；</li> <li>如果直接用 <code>a</code> 会<strong>被搜索引擎嫌弃</strong> —— 堆砌关键字，严重的会被降权，影响网站排名。</li></ol> <h4 id="_2-3-1-分析导航栏-nav-区域的结构构成"><a href="#_2-3-1-分析导航栏-nav-区域的结构构成" class="header-anchor">#</a> 2.3.1 分析导航栏 nav 区域的结构构成</h4> <ol><li>大小：待定</li> <li>位置：左侧距离 logo <code>60px</code></li></ol> <h4 id="_2-3-2-导航栏-nav-区域-上-代码实现"><a href="#_2-3-2-导航栏-nav-区域-上-代码实现" class="header-anchor">#</a> 2.3.2 导航栏 nav 区域（上）代码实现</h4> <ol><li><p>素材</p> <div class="language-txt extra-class"><pre class="language-text"><code>.nav&gt;ul&gt;li*3&gt;a

首页
课程
职业规划
</code></pre></div></li> <li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>首页<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>课程<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>职业规划<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.nav</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #aaa<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="_2-4-导航栏-nav-区域制作-中"><a href="#_2-4-导航栏-nav-区域制作-中" class="header-anchor">#</a> 2.4 导航栏 nav 区域制作(中)</h3> <blockquote><p>第 2 节课 / 5'58''</p></blockquote> <h4 id="_2-4-1-分析导航栏文字的水平大小和位置"><a href="#_2-4-1-分析导航栏文字的水平大小和位置" class="header-anchor">#</a> 2.4.1 分析导航栏文字的水平大小和位置</h4> <ol><li>实现导航文字水平排列 —— 让 <code>li</code> 浮动，因为 <code>li</code> 是块级元素，默认独占一行；</li> <li>为了增加导航栏的点击区域，需要把 <code>a</code> 转换成<strong>块级元素</strong> —— 指定宽高；</li> <li>点击区域的宽度用左右 <code>padding 10px</code> 撑开，高度 42px;</li> <li><code>a</code> 标签字体大小 <code>18px</code>；</li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>为了方便页面扩展，在布局导航栏时不需要指定宽度，以方便后续增加新的导航栏。</p></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>思考：使用 <code>padding</code> 撑开 <code>a</code> 标签除了可以根据文字长度灵活调整外，还有什么好处？</p></div> <h4 id="_2-4-2-导航栏-nav-区域-中-代码实现"><a href="#_2-4-2-导航栏-nav-区域-中-代码实现" class="header-anchor">#</a> 2.4.2 导航栏 nav 区域（中）代码实现</h4> <ol><li><p>让 <code>li</code> 浮动</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.nav ul li</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>导航 <code>a</code> 标签的显示模式和大小</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.nav ul li a</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 42px<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>增加导航 <code>a</code> 标签的显示细节</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.nav ul li a</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 42px<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0 10px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 42px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="_2-5-导航栏-nav-区域制作-下"><a href="#_2-5-导航栏-nav-区域制作-下" class="header-anchor">#</a> 2.5 导航栏 nav 区域制作(下)</h3> <blockquote><p>第 2 节课 / 2'54''</p></blockquote> <ol><li><p>鼠标经过样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.nav ul li a:hover</span> <span class="token punctuation">{</span>
  <span class="token property">border-bottom</span><span class="token punctuation">:</span> 2px solid #00a4ff<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #00a4ff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>调整 <code>a</code> 标签，增加 <code>box-sizing</code> 属性</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
</code></pre></div><blockquote><p>这样做在给盒子增加边框时，不会影响盒子大小，后续会讲。</p></blockquote></li> <li><p>调整 <code>li</code> 标签的间距</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.nav ul li</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>删除 <code>.nav</code> 的背景颜色。</p></li></ol> <h3 id="_2-6-搜索-search-模块-input-制作"><a href="#_2-6-搜索-search-模块-input-制作" class="header-anchor">#</a> 2.6 搜索 search 模块 input 制作</h3> <blockquote><p>第 3 节课 / 8'37''</p></blockquote> <h4 id="_2-6-1-搜索-search-模块结构分析"><a href="#_2-6-1-搜索-search-模块结构分析" class="header-anchor">#</a> 2.6.1 搜索 search 模块结构分析</h4> <ol><li>搜索模块构成：<code>.search&gt;input+button</code>；</li> <li><code>search</code> 大盒子大小：<code>412px * 42px</code>；</li> <li><code>search</code> 距离左侧文字距离 <code>50px</code>；</li> <li>输入框的大小：<code>360px * 40px</code>，上、下、左边框宽度 <code>1px</code>；
<ul><li><code>input</code> 右侧和按钮相邻，颜色相同，因此不需要边框；</li></ul></li> <li>输入框提示文字距离左侧边框距离 <code>15px</code>。</li></ol> <h4 id="_2-6-2-搜索-search-模块代码实现"><a href="#_2-6-2-搜索-search-模块代码实现" class="header-anchor">#</a> 2.6.2 搜索 search 模块代码实现</h4> <ol><li><p>素材</p> <div class="language-txt extra-class"><pre class="language-text"><code>.search&gt;input+button
</code></pre></div></li> <li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入关键词<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p><code>.search</code> 布局</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.search</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 412px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 42px<span class="token punctuation">;</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #aaa<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>输入框大小</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.search input</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 360px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #00a4ff<span class="token punctuation">;</span>
  <span class="token property">border-right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>输入框文字间距并重新调整盒子大小</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.search input</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 344px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #00a4ff<span class="token punctuation">;</span>
  <span class="token property">border-right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p><code>盒子宽度(344px) + 边框(1px) + 间距(14px) = 360px</code></p></blockquote></li></ol> <h3 id="_2-7-搜索-search-模块-button-制作"><a href="#_2-7-搜索-search-模块-button-制作" class="header-anchor">#</a> 2.7 搜索 search 模块 button 制作</h3> <blockquote><p>第 3 节课 / 5'13''</p></blockquote> <h4 id="_2-7-1-搜索-button-结构分析"><a href="#_2-7-1-搜索-button-结构分析" class="header-anchor">#</a> 2.7.1 搜索 button 结构分析</h4> <ol><li>按钮大小：<code>52px * 42px</code></li></ol> <h4 id="_2-7-2-搜索-button-代码实现"><a href="#_2-7-2-搜索-button-代码实现" class="header-anchor">#</a> 2.7.2 搜索 button 代码实现</h4> <ol><li><p>按钮大小</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.search button</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 52px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 42px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #f00<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>取消按钮默认的边框</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>给 <code>.search input</code> 和 <code>.search button</code> 增加浮动</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>表单元素的显示模式是 <code>inline-block</code> 彼此之间会有一个空隙。</p></div></li> <li><p>设置按钮的背景图像</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background</span><span class="token punctuation">:</span> #00a4ff <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../images/btn.png<span class="token punctuation">)</span></span> no-repeat center<span class="token punctuation">;</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <ol><li>注意图片的路径在上级的其他目录，应该从 <code>../</code> 开始查找；</li> <li>图片大小是 <code>50 * 40</code>，按钮的大小是 <code>52 * 42</code>，需要处理平铺和显示位置；</li> <li>背景图片的空隙位置使用背景色填满。</li></ol></div></li> <li><p>删除 <code>.search</code> 的测试背景颜色</p></li></ol> <h3 id="_2-8-用户-user-模块制作"><a href="#_2-8-用户-user-模块制作" class="header-anchor">#</a> 2.8 用户 user 模块制作</h3> <blockquote><p>第 3 节课 / 4'56''</p></blockquote> <h4 id="_2-8-1-用户-user-结构分析"><a href="#_2-8-1-用户-user-结构分析" class="header-anchor">#</a> 2.8.1 用户 user 结构分析</h4> <ol><li>用户信息模块构成：<code>.user&gt;img+span</code>；</li> <li>用户名不同文字长度会变化，因此不用给用户名设置宽度；</li> <li>用户信息需要距离版心右侧有一些距离</li></ol> <h4 id="_2-8-2-用户-user-代码实现"><a href="#_2-8-2-用户-user-代码实现" class="header-anchor">#</a> 2.8.2 用户 user 代码实现</h4> <ol><li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>user<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./images/user.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>用户头像<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token entity named-entity" title="&amp;ensp;">&amp;ensp;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>风一样的男子<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p><code>.user</code> 布局</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.user</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 42px<span class="token punctuation">;</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 42px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #aaa<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>图像垂直居中（讲完定位讲）</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.user img</span> <span class="token punctuation">{</span>
  <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>文字颜色</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">color</span><span class="token punctuation">:</span> #666<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>删除 <code>.user</code> 的测试背景颜色</p></li> <li><p>删除 <code>.header</code> 的测试背景颜色</p></li></ol> <h2 id="_3-banner-区域"><a href="#_3-banner-区域" class="header-anchor">#</a> 3. Banner 区域</h2> <h3 id="_3-1-banner-模块制作"><a href="#_3-1-banner-模块制作" class="header-anchor">#</a> 3.1 banner 模块制作</h3> <blockquote><p>第 3 节课 / 6'31''</p></blockquote> <h4 id="_3-1-1-分析-banner-区域的结构构成"><a href="#_3-1-1-分析-banner-区域的结构构成" class="header-anchor">#</a> 3.1.1 分析 banner 区域的结构构成</h4> <h5 id="_1-banner-区域的大小和位置"><a href="#_1-banner-区域的大小和位置" class="header-anchor">#</a> 1) banner 区域的大小和位置</h5> <ol><li>大小：<code>通栏 * 420px</code></li> <li>位置：水平居中 + 上下 margin</li></ol> <h5 id="_2-banner-区域的构成"><a href="#_2-banner-区域的构成" class="header-anchor">#</a> 2) banner 区域的构成</h5> <ol><li>通栏：和屏幕看看宽度相同，<code>#1c036c</code> 背景色</li> <li>左侧子导航 <code>subnav</code></li> <li>右侧课程信息 <code>course</code></li></ol> <h4 id="_3-1-2-banner-区域代码实现"><a href="#_3-1-2-banner-区域代码实现" class="header-anchor">#</a> 3.1.2 banner 区域代码实现</h4> <ol><li><p>通栏结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- banner 区域 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>banner<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>通栏布局</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* banner 区域 */</span>
<span class="token selector">.banner</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 420px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #1c036c<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.banner .w</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> #1c036c <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../uploads/big-banner.png<span class="token punctuation">)</span></span> no-repeat center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="_3-2-subnav-模块制作-上"><a href="#_3-2-subnav-模块制作-上" class="header-anchor">#</a> 3.2 subnav 模块制作（上）</h3> <blockquote><p>第 4 节课 / 5'59''</p></blockquote> <h4 id="_3-2-1-subnav-结构分析"><a href="#_3-2-1-subnav-结构分析" class="header-anchor">#</a> 3.2.1 subnav 结构分析</h4> <ol><li>subnav 的大小：<code>190px * 420px</code>，靠左浮动；</li> <li>内容构成 <code>ul&gt;li*9&gt;a</code> 构成</li> <li>子导航 ul 的外间距 <code>margin: 8px 20px</code></li></ol> <h4 id="_3-2-2-subnav-代码实现"><a href="#_3-2-2-subnav-代码实现" class="header-anchor">#</a> 3.2.2 subnav 代码实现</h4> <ol><li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>subnav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>布局</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.banner .subnav</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 190px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>子导航结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>前端开发<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>后端开发<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>移动开发<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>人工智能<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>商业预测<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>云计算&amp;大数据<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>运维&amp;从测试<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>UI设计<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>产品<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>子导航布局</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.subnav ul</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 8px 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.subnav ul li</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 45px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 45px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.subnav ul li a</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="_3-3-subnav-模块制作-下"><a href="#_3-3-subnav-模块制作-下" class="header-anchor">#</a> 3.3 subnav 模块制作（下）</h3> <blockquote><p>第 4 节课 / 3'16''</p></blockquote> <h4 id="_3-3-1-subnav-结构分析"><a href="#_3-3-1-subnav-结构分析" class="header-anchor">#</a> 3.3.1 subnav 结构分析</h4> <ol><li>在 <code>a</code> 标签中增加 <code>span</code> → <code>&amp;gt;</code>，右浮动；</li> <li>转换 <code>a</code> 标签显示模式，增大点击区域。</li></ol> <h4 id="_3-3-2-subnav-代码实现"><a href="#_3-3-2-subnav-代码实现" class="header-anchor">#</a> 3.3.2 subnav 代码实现</h4> <ol><li><p>调整结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>前端开发<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity" title="&gt;">&amp;gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
...
</code></pre></div></li> <li><p>转换 <code>a</code> 标签显示模式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.subnav ul li a</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p><code>span</code> 标签右浮动</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.subnav ul li a span</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>鼠标经过样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.subnav ul li a:hover</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #00a4ff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="_3-4-course-模块制作-上"><a href="#_3-4-course-模块制作-上" class="header-anchor">#</a> 3.4 course 模块制作（上）</h3> <blockquote><p>第 4 节课 / 4'31''</p></blockquote> <h4 id="_3-4-1-course-结构分析"><a href="#_3-4-1-course-结构分析" class="header-anchor">#</a> 3.4.1 course 结构分析</h4> <ol><li>课程盒子大小：<code>228px * 300px</code>，顶部距离 <code>50px</code>，靠右浮动；</li> <li>盒子结构：上（<code>h2</code>）、下（<code>div</code>）两部分；</li> <li>盒子背景色为纯白 <code>#fff</code>；</li></ol> <h4 id="_3-4-2-course-代码实现"><a href="#_3-4-2-course-代码实现" class="header-anchor">#</a> 3.4.2 course 代码实现</h4> <ol><li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>subnav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>course<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>布局</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.course</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 228px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">margin-top</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>课程结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>course<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>我的课程表<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bd<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>123<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <h3 id="_3-5-course-模块制作-中"><a href="#_3-5-course-模块制作-中" class="header-anchor">#</a> 3.5 course 模块制作（中）</h3> <blockquote><p>第 4 节课 / 3'23''</p></blockquote> <h4 id="_3-5-1-course-标题结构分析"><a href="#_3-5-1-course-标题结构分析" class="header-anchor">#</a> 3.5.1 course 标题结构分析</h4> <ol><li>标题大小：<code>228px * 48px</code>；</li> <li>背景颜色：<code>#9bceea</code>；</li> <li>字体大小：<code>18px</code>；</li></ol> <h4 id="_3-5-2-course-标题代码实现"><a href="#_3-5-2-course-标题代码实现" class="header-anchor">#</a> 3.5.2 course 标题代码实现</h4> <ol><li><p>标题样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.course h2</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 48px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 48px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #9bceea<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="_3-6-course-模块制作-下"><a href="#_3-6-course-模块制作-下" class="header-anchor">#</a> 3.6 course 模块制作（下）</h3> <blockquote><p>第 4 节课 / 7'35''</p></blockquote> <h4 id="_3-6-1-course-内容结构分析"><a href="#_3-6-1-course-内容结构分析" class="header-anchor">#</a> 3.6.1 course 内容结构分析</h4> <ol><li>内容结构：<code>ul&gt;li*3&gt;h4+p</code> + <code>a</code>；</li> <li><code>bd</code> 利用 <code>padding</code> 增加左右间距；</li> <li><code>bd</code> 内部的 <code>li</code> 用 <code>padding</code> 撑开上下距离，方便增加底部边线 <code>12px</code>；</li> <li><code>h4</code> 字体 <code>16px</code> / <code>#4e4e4e</code>；</li> <li><code>p</code> 字体 <code>12px</code> / <code>#a5a5a5</code>；</li> <li><code>a</code> 标签大小：<code>180px * 41px</code> / <code>#00a4ff</code> / <code>16px</code>；</li> <li><code>a</code> 标签边框：<code>#00a4ff</code>。</li></ol> <h4 id="_3-6-2-course-内容代码实现"><a href="#_3-6-2-course-内容代码实现" class="header-anchor">#</a> 3.6.2 course 内容代码实现</h4> <ol><li><p>内容结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>我的课程表<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bd<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>继续学习 程序语言设计<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>正在学习-使用对象<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>继续学习 程序语言设计<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>正在学习-使用对象<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>继续学习 程序语言设计<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>正在学习-使用对象<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>全部课程<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p><code>bd</code> 间距</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.course .bd</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p><code>li</code> 间距和边框</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.course .bd ul li</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 12px 0<span class="token punctuation">;</span>
  <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #ccc<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p><code>h4</code> &amp; <code>p</code> 字体属性</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.course .bd h4</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #4e4e4e<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.course .bd p</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #a5a5a5<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p><code>a</code> 标签样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.course .bd a</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 4px auto<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 41px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 41px<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> 700<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #00a4ff<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #00a4ff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h2 id="_4-精品推荐"><a href="#_4-精品推荐" class="header-anchor">#</a> 4. 精品推荐</h2> <h3 id="_4-1-精品推荐模块-上"><a href="#_4-1-精品推荐模块-上" class="header-anchor">#</a> 4.1 精品推荐模块（上）</h3> <blockquote><p>第 5 节课 / 03'44''</p></blockquote> <h4 id="_4-1-1-精品推荐内容结构分析"><a href="#_4-1-1-精品推荐内容结构分析" class="header-anchor">#</a> 4.1.1 精品推荐内容结构分析</h4> <ol><li>父级盒子有阴影，高度 <code>60px</code>，距离顶部 <code>8px</code>；</li> <li>父级盒子可以拆成三部分实现：
<ol><li>精品推荐（<code>h3</code>）左浮动</li> <li>课程导航（<code>good-items</code>）</li> <li>修改兴趣（`mod1）右浮动</li></ol></li></ol> <h4 id="_4-1-2-精品推荐内容代码实现"><a href="#_4-1-2-精品推荐内容代码实现" class="header-anchor">#</a> 4.1.2 精品推荐内容代码实现</h4> <ol><li><p>大盒子结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 精品推荐 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goods w<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>大盒子布局</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.goods</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
  <span class="token property">margin-top</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>大盒子阴影</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 2px 3px 3px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.1<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ol> <h3 id="_4-2-精品推荐模块-中"><a href="#_4-2-精品推荐模块-中" class="header-anchor">#</a> 4.2 精品推荐模块（中）</h3> <blockquote><p>第 5 节课 / 03'34''</p></blockquote> <h4 id="_4-2-1-精品推荐内容结构分析"><a href="#_4-2-1-精品推荐内容结构分析" class="header-anchor">#</a> 4.2.1 精品推荐内容结构分析</h4> <ol><li>内部结构 <code>h3{精品推荐}+ul&gt;li*6&gt;a</code> + <code>a.mod{修改兴趣}</code>；</li> <li><code>h3</code> &amp; <code>ul</code> 左浮动，<code>.mod</code> 右浮动；</li> <li>精品推荐所有文本都保持垂直居中。</li></ol> <h4 id="_4-2-2-精品推荐内容代码实现"><a href="#_4-2-2-精品推荐内容代码实现" class="header-anchor">#</a> 4.2.2 精品推荐内容代码实现</h4> <ol><li><p>内部结构搭建</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>精品推荐<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>jQuery<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>React<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mod<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>修改兴趣<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>内部元素浮动</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.goods h3,
.goods ul,
.goods li</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.goods .mod</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>在 <code>.goods</code> 中设置行高，会继承给三个孩子</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">line-height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
</code></pre></div></li></ol> <h3 id="_4-3-精品推荐模块-下"><a href="#_4-3-精品推荐模块-下" class="header-anchor">#</a> 4.3 精品推荐模块（下）</h3> <blockquote><p>第 5 节课 / 04'53''</p></blockquote> <h4 id="_4-3-1-精品推荐内容代码实现"><a href="#_4-3-1-精品推荐内容代码实现" class="header-anchor">#</a> 4.3.1 精品推荐内容代码实现</h4> <ol><li><p>修改 <code>h3</code> 和 <code>.mod</code> 的外间距</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.goods h3</span> <span class="token punctuation">{</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.goods .mod</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>设置 <code>h3</code> 的样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.goods h3</span> <span class="token punctuation">{</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #00a4ff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>修改 <code>.mod</code> 的样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.goods .mod</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 30px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #00a4ff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>设置 <code>li&gt;a</code> 的内间距和字体</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.goods li a</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0 30px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>设置 <code>li&gt;a</code> 的左边框</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.goods li a</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0 30px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
  <span class="token property">border-left</span><span class="token punctuation">:</span> 1px solid #bfbfbf<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h2 id="_5-核心内容-课程列表"><a href="#_5-核心内容-课程列表" class="header-anchor">#</a> 5. 核心内容 - 课程列表</h2> <h3 id="_5-1-box-hd-模块制作"><a href="#_5-1-box-hd-模块制作" class="header-anchor">#</a> 5.1 box-hd 模块制作</h3> <blockquote><p>第 5 节课 / 07'25''</p></blockquote> <h4 id="_5-1-1-box-hd-内容结构"><a href="#_5-1-1-box-hd-内容结构" class="header-anchor">#</a> 5.1.1 box-hd 内容结构</h4> <ol><li><code>.box&gt;.box-hd+.box-bd</code>；
<ol><li><code>.box</code> 距离顶部 <code>36px</code></li></ol></li> <li><code>.box-hd</code> → <code>h3</code> 左浮动 + <code>a</code> 右浮动；
<ol><li><code>height</code>：<code>45px</code></li> <li><code>h3{精品课程}+a{查看全部}</code></li></ol></li> <li><code>.box-bd</code> → <code>ul&gt;li*10</code>；</li> <li><code>.box-bd</code> 宽度 <code>1215px</code> 避免单独解决 <code>margin-right</code> 问题。</li></ol> <h4 id="_5-1-2-box-hd-内容代码实现"><a href="#_5-1-2-box-hd-内容代码实现" class="header-anchor">#</a> 5.1.2 box-hd 内容代码实现</h4> <ol><li><p><code>.box</code> 结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 核心内容 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box w<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box-hd<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box-bd<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p><code>.box</code> 布局</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">margin-top</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p><code>.box-hd</code> 结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box-hd<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>精品课程<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>查看全部<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p><code>.box-hd</code> 布局</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box .box-hd</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 45px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 45px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #aaa<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p><code>.box-hd h3</code> &amp; <code>.box-hd a</code></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box .box-hd h3</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #494949<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box .box-hd a</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #a5a5a5<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>删除 <code>.box-hd</code> 测试背景颜色</p></li></ol> <h3 id="_5-2-box-bd-模块制作"><a href="#_5-2-box-bd-模块制作" class="header-anchor">#</a> 5.2 box-bd 模块制作</h3> <blockquote><p>第 6 节课 / 05'44''</p></blockquote> <h4 id="_5-2-1-box-bd-结构分析"><a href="#_5-2-1-box-bd-结构分析" class="header-anchor">#</a> 5.2.1 box-bd 结构分析</h4> <ol><li><code>li</code> 的大小：<code>228px * 270px</code>；</li> <li><code>li</code> 的水平间距 <code>15px</code>；</li> <li><code>ul</code> 的宽度 <code>1215px；</code></li> <li><code>li</code> 的下间距间距 <code>15px</code>；</li></ol> <h4 id="_5-2-2-box-bd-结构代码实现"><a href="#_5-2-2-box-bd-结构代码实现" class="header-anchor">#</a> 5.2.2 box-bd 结构代码实现</h4> <ol><li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box-bd<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>大小、浮动和间距</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box .box-bd li</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 228px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 270px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>修改 <code>.box .box-bd ul</code> 的宽度</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box .box-bd ul</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 1215px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>增加 <code>li</code> 的下边距</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">margin-bottom</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
</code></pre></div></li></ol> <h3 id="_5-3-box-模块完成"><a href="#_5-3-box-模块完成" class="header-anchor">#</a> 5.3 box 模块完成</h3> <blockquote><p>第 6 节课 / 05'44''</p></blockquote> <h4 id="_5-3-1-box-课程内容代码实现"><a href="#_5-3-1-box-课程内容代码实现" class="header-anchor">#</a> 5.3.1 box 课程内容代码实现</h4> <ol><li><p>第一个 <code>li</code> 的结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./uploads/course01.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>课程图片<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>Think PHP 5.0 博客系统实战项目演练<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">&gt;</span></span>高级<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">&gt;</span></span>•1125人在学习<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p><code>img</code> 样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box .box-bd li img</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p><code>h4</code> 样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box .box-bd li h4</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 20px 20px 20px 25px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p><code>.info</code> 样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box .box-bd .info</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 20px 0 25px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #999<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p><code>.info &gt; em</code> 样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box .box-bd .info &gt; em</span> <span class="token punctuation">{</span>
  <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #ff7c2d<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>再复制 9 份 <code>li</code></p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>选中多行，按 <code>alt + shift + ↑ / ↓</code> 可以复制多行。</p></div></li> <li><p>清除 <code>.box</code> 的浮动</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 核心内容 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box w clearfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>删除 <code>.box</code> 的测试背景颜色</p></li></ol> <h2 id="_6-页面底部"><a href="#_6-页面底部" class="header-anchor">#</a> 6. 页面底部</h2> <h3 id="_6-1-footer-模块制作"><a href="#_6-1-footer-模块制作" class="header-anchor">#</a> 6.1 footer 模块制作</h3> <blockquote><p>第 6 节课 / 04'47''</p></blockquote> <h4 id="_6-1-1-footer-结构分析"><a href="#_6-1-1-footer-结构分析" class="header-anchor">#</a> 6.1.1 footer 结构分析</h4> <ol><li><code>.footer</code> 通栏大盒子，白色背景 / 高度 <code>415px</code> /</li> <li><code>.w</code> 版心存放内容</li> <li><code>.copyright</code> 版权信息左浮动</li> <li><code>.link</code> 网站链接导航右浮动</li></ol> <h4 id="_6-1-2-footer-结构代码实现"><a href="#_6-1-2-footer-结构代码实现" class="header-anchor">#</a> 6.1.2 footer 结构代码实现</h4> <ol><li><p>通栏结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- footer 底部 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>通栏布局</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* footer 底部 */</span>
<span class="token selector">.footer</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 415px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="_6-2-copyright-模块制作"><a href="#_6-2-copyright-模块制作" class="header-anchor">#</a> 6.2 copyright 模块制作</h3> <blockquote><p>第 6 节课 / 06'15''</p></blockquote> <h4 id="_6-2-1-copyright-结构分析"><a href="#_6-2-1-copyright-结构分析" class="header-anchor">#</a> 6.2.1 copyright 结构分析</h4> <ol><li><code>.w</code> 距离顶部 <code>35px</code></li> <li><code>.copyright</code> 左浮动 + <code>.link</code> 右浮动</li> <li>版权信息的构成 <code>img+p+a.app</code></li></ol> <h4 id="_6-2-2-footer-结构代码实现"><a href="#_6-2-2-footer-结构代码实现" class="header-anchor">#</a> 6.2.2 footer 结构代码实现</h4> <ol><li><p>设置版心的上边距（会出现盒子塌陷）</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.footer .w</span> <span class="token punctuation">{</span>
  <span class="token property">margin-top</span><span class="token punctuation">:</span> 35px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>修改 <code>.footer</code> 解决盒子塌陷</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>左右结构搭建（<code>.copyright{版权}+.links{链接}</code>）</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w clearfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>copyright<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>版权<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>links<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>链接<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在开发时应该养成清除浮动的习惯，而不要等到出问题再去考虑为什么。</p></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>不要给清除浮动添加到<strong>通栏</strong>上，因为<strong>通栏内部只有版心一个标准流的盒子</strong>。</p></div></li> <li><p>左右结构布局</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.copyright</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.links</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>版权信息结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>copyright<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./images/logo.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>学成在线首页<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
    <span class="token entity named-entity" title="&amp;copy;">&amp;copy;</span> 2017 年 XTCG Inc.保留所有权利。- 沪ICP备15025210号
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>下载App<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>设置段落样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.copyright p</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 20px 0 15px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #666<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>设置 <code>.app</code> 样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.copyright .app</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 188px<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #00a4ff<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 33px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 33px<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #00a4ff<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="_6-3-links-模块制作"><a href="#_6-3-links-模块制作" class="header-anchor">#</a> 6.3 links 模块制作</h3> <blockquote><p>第 6 节课 / 04'35''</p></blockquote> <ol><li><p>搭建结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>links<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dl</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dt</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>关于学成网<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dt</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>关于<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>管理团队<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>工作机会<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>客户服务<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>帮助<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dl</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dl</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dt</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>新手指南<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dt</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>如何注册<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>如何选课<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>如何拿到毕业证<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>学分是什么<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>考试未通过怎么办<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dl</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dl</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dt</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>合作伙伴<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dt</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>合作机构<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>合作导师<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dl</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p><code>.link dl</code> 全部浮动并设置左外间距 <code>100px</code></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.links dl</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>设置 <code>dt</code> 显示属性</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.links dl dt</span> <span class="token punctuation">{</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>设置 <code>dd</code> 显示属性</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.links dl dd a</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>删除版心的测试背景颜色</p></li></ol></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/basenode/css/day04.html" class="prev">
        CSS 第 04 天 —— 浮动
      </a></span> <span class="next"><a href="/basenode/css/day06.html">
        CSS 第 06 天 —— 定位
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/basenode/assets/js/app.52c57e5d.js" defer></script><script src="/basenode/assets/js/2.fd1002bd.js" defer></script><script src="/basenode/assets/js/22.c01d802c.js" defer></script>
  </body>
</html>
